<script setup>

import { defineProps } from 'vue';
import { ref } from 'vue';
import { onMounted, onActivated } from 'vue';
import '../assets/main.css';

const params = defineProps({
    getter: Function,
    setter: Function,
    oncancel: Function
});

const feed_time = ref('');
const feed_set = ref(1);

onMounted(()=>{
    if(params.getter){
        const setting = params.getter();
        feed_time.value = setting.time;
        feed_set.value = setting.set;
    };
    window.addEventListener('keydown', (event)=>{
        if (event.key === 'Escape') {
            do_cancel(event);
        }
    })
});

const do_ok = ()=>{
    params.setter(feed_time.value, feed_set.value, false);
}

const do_cancel =(event)=>{
    if(event.target == event.currentTarget || event.key === 'Escape'){
        params.setter(null, null, true);
    }
}

const handle_number_input = (event)=>{
  // 使用正则表达式来确保只有数字被输入
  const regex = /^[0-9]*$/;

  const { value } = event.target;

  // 如果输入的值不匹配正则表达式，则将input的值设置为上一个值
  if (!regex.test(value)) {
    inputValue.value = value.slice(0, -1);
  }
};

</script>

<template>
    <div class="modaloverlay">
        <div class="modalcontent">
            <div class="closemodal">
                <img @click="do_cancel" src="../assets/close.png">
            </div>
            <div class="item-div">
                <a>出粮时间</a>
                <input name="feed_time_edit" type="time" step="60" v-model="feed_time">
            </div>
            <div class="item-div">
                <a>出粮份数</a>
                <input type="number" name="feed_set_edit" v-model="feed_set" @input="handle_number_input" min="1" max="20">
            </div>
            <div class="btn-div">
                <button class="ok-btn" @click.stop="do_ok">确定</button>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .modaloverlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-content: center;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    .modalcontent {
        display: inline-block;
        flex-direction: column;
        background-color: white;
        border-radius: 4px;
    }
    .closemodal {
        display: flex;
        width: 100%;
        height: 1.5rem;
        background-color: #F59B22;
        flex-direction: row-reverse;
        align-items: center;
    }
    .closemodal img{
        width: 1rem;
        height: 1rem;
        padding-right: 0.2rem;
    }

    .item-div{
        margin-top: 1rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left : 3rem;
        padding-right: 3rem;
    }
    .icon_img{
        height: 3rem;
        width: 3rem;
    }
    .btn-div{
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        flex: 1;
        padding-bottom: 1rem;
    }
    input{
        width:6rem;
        height: 1.5rem;
        margin-top: 0.5rem;
        text-align: center;
        font-weight: bold;
    }
</style>